<template>
  <div class="app-container">
    <el-card>
      <div class="detailTop">
        <div class="img">
          <img v-imgerr="require('@/assets/common/head.jpg')" :src="userInfo.staffPhoto">
        </div>
        <div class="info">
          <h5>{{ userInfo.username }}
            <el-tag style="margin-left:10px" type="success">{{ userInfo.inServiceStatus===1?'在职':'离职' }}
            </el-tag>
          </h5>
          <span>最新工资基数</span>
          <span style="margin-left:10px">入职时间 {{ userInfo.timeOfEntry }}</span>
          <span style="margin-left:10px">联系电话 {{ userInfo.mobile }}</span><br><br>
          <span>本月不缴纳社保
            <el-switch
              v-model="socialSecurity"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="change"
            /></span>
          <span style="margin-left:10px">本月不缴纳公积金
            <el-switch
              v-model="accumulationFund"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="change"
            /></span>
        </div>
      </div>
    </el-card>
    <el-card style="margin-top:20px">
      <el-form ref="socialForm" :model="employeeSocialInfo" :rules="rules" label-width="100px">
        <el-form-item label="参保城市" prop="participatingInTheCity">
          <el-select v-model="employeeSocialInfo.participatingInTheCity" placeholder="请选择参保城市" size="small">
            <el-option label="北京" value="employeeSocialInfo.participatingInTheCityId" />
          </el-select>
        </el-form-item>
        <el-form-item label="社保类型" prop="socialSecurityType">
          <el-select v-model="employeeSocialInfo.socialSecurityType" placeholder="请选择社保类型" size="small">
            <el-option v-for="item in SecurityType" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="户籍类型" prop="householdRegistrationType">
          <el-select v-model="employeeSocialInfo.householdRegistrationType" placeholder="请选择户籍类型" size="small">
            <el-option v-for="item in householdTyep" :key="item.id" :label="item.name" :value="item.id" />

          </el-select>
        </el-form-item>
        <el-form-item label="参保基数" prop="socialSecurityBase">
          <el-input v-model="employeeSocialInfo.socialSecurityBase" size="small" style="width:500px" /><span> (基数范围是3387~25401)</span>
        </el-form-item>
        <el-form-item label="工伤比例" prop="industrialInjuryRatio">
          <el-input v-model="employeeSocialInfo.industrialInjuryRatio" size="small" style="width:500px" /><span> (比例范围是0.2％ ~ 3％，推荐0.2％)</span>
        </el-form-item>
        <el-form-item label="社保缴纳">
          个人 <el-input :value="personalPayment" disabled size="small" style="width:200px" />
          公司 <el-input :value="companyPayment" disabled size="small" style="width:200px" />
        </el-form-item>
        <el-form-item>
          <el-table
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column
              label="缴纳项目"
              width="180"
              prop="item"
            />
            <el-table-column
              label="企业基数"
              width="180"
              prop="companyBase"
            />
            <el-table-column
              label="企业比例"
              prop="companyPercent"
            />
            <el-table-column
              label="企业缴纳"
              prop="companyPayment"
            >
              <template slot-scope="scope">
                <el-input size="small" disabled :value="scope.row.companyPayment" />
              </template>
            </el-table-column>
            <el-table-column
              label="个人基数"
              prop="personalBase"
            />
            <el-table-column
              label="个人比例"
              prop="personalPercent"
            />
            <el-table-column
              label="个人缴纳"
              prop="personalPayment"
            >
              <template slot-scope="scope">
                <el-input v-if="scope.row.personalPayment" size="small" disabled :value="scope.row.personalPayment" />
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="社保备注">
          <el-input v-model="employeeSocialInfo.socialSecurityNotes" type="textarea" :rows="2" placeholder="1-300字符" maxlength="300" style="width:500px" show-word-limit />
        </el-form-item>
        <el-form-item label="公积金城市" prop="providentFundCity">
          <el-select v-model="employeeSocialInfo.providentFundCity" placeholder="请选择参保城市" size="small">
            <el-option label="北京" value="employeeSocialInfo.providentFundCityId" />
          </el-select>
        </el-form-item>
        <el-form-item label="公积金基数" prop="providentFundBase">
          <el-input v-model="employeeSocialInfo.providentFundBase" size="small" style="width:500px" /><span> (基数范围是2273 ~ 25401)</span>
        </el-form-item>
        <el-form-item label="企业比例" prop="enterpriseProportion">
          <el-input v-model="employeeSocialInfo.enterpriseProportion" size="small" style="width:500px" /><span>（比例范围是5％ ~ 12％，推荐12％ ）</span>
        </el-form-item>
        <el-form-item label="个人比例" prop="personalProportion">
          <el-input v-model="employeeSocialInfo.personalProportion" size="small" style="width:500px" /><span>（比例范围是5％ ~ 12％，推荐12％ ）</span>
        </el-form-item>
        <el-form-item label="公积金缴纳">
          <el-form-item prop="personalProvidentFundPayment" style="display:inline-block">
            个人 <el-input v-model="employeeSocialInfo.personalProvidentFundPayment" size="small" style="width:200px" />
          </el-form-item>
          <el-form-item prop="enterpriseProvidentFundPayment" style="display:inline-block;margin-left:10px">
            公司 <el-input v-model="employeeSocialInfo.enterpriseProvidentFundPayment" size="small" style="width:200px" />
          </el-form-item>
          <el-form-item style="display:inline-block">
            <span>（为自动测算结果，可手动调整）</span>
          </el-form-item>
        </el-form-item>
        <el-form-item label="公积金备注">
          <el-input v-model="employeeSocialInfo.providentFundNotes" type="textarea" :rows="2" placeholder="1-300字符" maxlength="300" style="width:500px" show-word-limit />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="onSubmit">保存更新</el-button>
          <el-button size="small" @click="$router.back()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getEmployeeSocial, updataEmployeeSocial } from '@/api/social'
import moment from 'moment'
export default {
  data() {
    return {
      employeeSocialInfo: {}, // 员工社保详细信息
      userInfo: {}, // 员工信息
      rules: {
        participatingInTheCity:
              [{ required: 'true', message: '这是必填项', trigger: 'blur' }],
        socialSecurityType:
            [{ required: 'true', message: '这是必填项', trigger: 'blur' }],
        householdRegistrationType:
            [{ required: 'true', message: '这是必填项', trigger: 'blur' }],
        socialSecurityBase:
            [{ required: 'true', message: '这是必填项', trigger: 'blur' }],
        industrialInjuryRatio:
            [{ required: 'true', message: '这是必填项', trigger: 'blur' }],
        providentFundCity:
            [{ required: 'true', message: '这是必填项', trigger: 'blur' }],
        providentFundBase:
            [{ required: 'true', message: '这是必填项', trigger: 'blur' }],
        enterpriseProportion:
            [{ required: 'true', message: '这是必填项', trigger: 'blur' }],
        personalProportion:
            [{ required: 'true', message: '这是必填项', trigger: 'blur' }],
        personalProvidentFundPayment:
            [{ required: 'true', message: '这是必填项', trigger: 'blur' }],
        enterpriseProvidentFundPayment:
            [{ required: 'true', message: '这是必填项', trigger: 'blur' }]
      },
      //   开户枚举数据
      SecurityType: [
        {
          name: '首次开户',
          id: 1
        },
        {
          name: '非首次开户',
          id: 2
        }
      ],
      //   家乡枚举数据
      householdTyep: [
        {
          name: '本市城镇',
          id: 1
        },
        {
          name: '本市农村',
          id: 2
        },
        {
          name: '外埠城镇',
          id: 3
        },
        {
          name: '外埠农村',
          id: 4
        }
      ],
      //   表格数据
      tableData: [
        {
          item: '养老',
          companyBase: '',
          companyPercent: '16%',
          companyPayment: '',
          personalBase: '',
          personalPercent: '8%',
          personalPayment: ''
        },
        {
          item: '医疗',
          companyBase: '',
          companyPercent: '10%',
          companyPayment: '',
          personalBase: '',
          personalPercent: '5%',
          personalPayment: ''
        },
        {
          item: '失业',
          companyBase: '',
          companyPercent: '0.8%',
          companyPayment: '',
          personalBase: '',
          personalPercent: '0.2%',
          personalPayment: ''
        },
        {
          item: '工伤',
          companyBase: '',
          companyPercent: '2%',
          companyPayment: '',
          personalBase: '',
          personalPercent: '',
          personalPayment: ''
        },
        {
          item: '生育',
          companyBase: '',
          companyPercent: '0.8%',
          companyPayment: '',
          personalBase: '',
          personalPercent: '',
          personalPayment: ''
        },
        {
          item: '大病',
          companyBase: '',
          companyPercent: '0%',
          companyPayment: '',
          personalBase: '',
          personalPercent: '0%',
          personalPayment: ''
        }
      ],
      //   社保缴纳,个人及公司
      personalPayment: '',
      companyPayment: '',
      //   本月缴纳社保
      socialSecurity: false,
      //   本月缴纳公积金
      accumulationFund: false
    }
  },
  async created() {
    this.getEmployeeSocial()
    this.change()
  },
  methods: {
    //   获取表单数据
    getEmployeeSocial() {
      this.$nextTick(async() => {
        const { user, userSocialSecurity } = await getEmployeeSocial(this.$route.params.id)
        this.userInfo = user
        //   改造入职时间数据
        this.userInfo.timeOfEntry = this.userInfo.timeOfEntry.split('T')[0]
        this.employeeSocialInfo = userSocialSecurity
        //   console.log(userSocialSecurity.socialSecurityBase)
        //   改造表格数据
        this.tableData.map(item => {
        //   企业基数
          item.companyBase = this.employeeSocialInfo.socialSecurityBase
          // 企业缴纳 百分比转小数,结果保留小数点四舍五入两位
          item.companyPayment = (this.employeeSocialInfo.socialSecurityBase * this.toPoint(item.companyPercent)).toFixed(2)
          // 个人缴纳
          if (item.item !== '工伤' && item.item !== '生育') { item.personalPayment = (this.employeeSocialInfo.socialSecurityBase * this.toPoint(item.personalPercent)).toFixed(2) }
        })
        //   改造社保缴纳数据
        //   公司
        this.companyPayment = (this.tableData.reduce((prev, next) => {
          return prev + Number(next.companyPayment)
        }, 0)).toFixed(2)
        //   个人
        this.personalPayment = (this.tableData.reduce((prev, next) => {
          return prev + Number(next.personalPayment)
        }, 0)).toFixed(2)
      })
    },
    // 百分比转小数
    toPoint(percent) {
      var str = percent.replace('%', '')
      str = str / 100
      return str
    },
    change() {
      // 本月缴纳社保状态改变
      this.socialSecurity ? this.employeeSocialInfo.enterprisesPaySocialSecurityThisMonth = 1 : this.employeeSocialInfo.enterprisesPaySocialSecurityThisMonth = 0
      // 本月缴纳公积金状态改变
      this.accumulationFund ? this.employeeSocialInfo.enterprisesPayTheProvidentFundThisMonth = 1 : this.employeeSocialInfo.enterprisesPayTheProvidentFundThisMonth = 0
    },
    async  onSubmit() {
      // 校验表单
      await this.$refs.socialForm.validate()
      // 发送请求
      //   补充最后修改时间
      //   console.log(this.employeeSocialInfo.enterprisesPaySocialSecurityThisMonth)
      //   console.log(this.employeeSocialInfo.enterprisesPayTheProvidentFundThisMonth)
      this.employeeSocialInfo.lastModifyTime = moment().format()
      await updataEmployeeSocial({
        ...this.employeeSocialInfo, id: this.$route.params.id, ...this.userInfo
      })

      // 提示
      this.$message.success('操作成功')
      // 更新数据
      this.getEmployeeSocial()
    }
  }
}
</script>

<style lang="scss" scoped>

 ::v-deep .detailTop{
      display: flex;
      padding: 10px;
      .img{
          img{
          width: 100px;
          height: 100px;
          object-fit: contain;
          margin-right: 20px;
          }

      }
  }

::v-deep .el-form-item__label{
    font-weight: 400;
}
 ::v-deep .has-gutter th{
   background-color: #fafafa;
   border-bottom: 2px solid #e8e8e8;
 }

</style>
